<template>
    <div class="parent-box" @mouseover="show_more_info" @click.stop="chow_info_byclick">
        <!-- 不采用hover宽度,api -->
        <div class="left_funx_box">
            <div class="head_image">
                <img v-if="userData.head_image" :src="userData.head_image" alt="头像" />
                <span v-else>{{ userInitial }}</span>
            </div>
            <div class="more_box" v-if="show_more" @mouseleave="hide_more_info">
                <div class="user-info">
                    <div class="info-header">
                        <img v-if="userData.head_image" :src="userData.head_image" alt="头像" class="info-avatar"/>
                        <div class="info-name">
                            <h3>{{ userData.name }}</h3>
                            <span class="status" :class="{'online': userData.status === '在线'}">{{ userData.status }}</span>
                        </div>
                    </div>
                    <div class="info-details">
                        <p><strong>ID:</strong> {{ userData.id }}</p>
                        <p><strong>年龄:</strong> {{ userData.age }}</p>
                        <p><strong>性别:</strong> {{ userData.sex }}</p>
                        <p><strong>邮箱:</strong> {{ userData.email }}</p>
                        <p><strong>电话:</strong> {{ userData.phone }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { inject, onMounted, ref, computed } from 'vue';

let show_more = ref(false);
const user = inject('user')();
const userData = ref({
    id: '',
    name: '',
    status: '',
    head_image: '',
    age: 0,
    sex: '',
    email: '',
    phone: ''
});

const userInitial = computed(() => {
    return userData.value.name ? userData.value.name.charAt(0) : '?';
});

const show_more_info = () => {
    show_more.value = true;
};
const chow_info_byclick = () => { 
    show_more.value=!show_more.value
}

const hide_more_info = () => {
    show_more.value =false;
};

onMounted(() => { 
    const userInfo = user.value.get_user();
    if (userInfo) {
        userData.value = {
            id: userInfo.id || '',
            name: userInfo.name || userInfo.username || '',
            status: userInfo.status || '离线',
            head_image: userInfo.head_image || '',
            age: userInfo.age || 0,
            sex: userInfo.sex || '未知',
            email: userInfo.email || '',
            phone: userInfo.phone || ''
        };
    }
});
onMounted(() => { 
    // console.log(user.value.get_user())
})
</script>

<style scoped>
.parent-box {
    width: 100%;
    position: relative; 
}
.left_funx_box {
    width: 100%;
    display: flex;
    position: relative;
    height: 100%;
    justify-content: center; 
    align-items: center;
    flex-direction: row;
    gap: 10px;
    overflow: hidden;
}

.head_image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    overflow: hidden;
}
.head_image:hover{
    scale: 1.1;
}

.head_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more_box {
    width: 300px;
    height:auto;
    position: fixed;
    top: 0px;
    left: 80px;
    top: calc(50px + 16px);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px; 
    box-sizing: border-box;
    z-index: 101;
}

.user-info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.info-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.info-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.info-name h3 {
    margin: 0;
    font-size: 18px;
}

.status {
    font-size: 12px;
    color: #999;
}

.status.online {
    color: #67C23A;
}

.info-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.info-details p {
    margin: 5px 0;
    font-size: 14px;
}

.info-details strong {
    margin-right: 10px;
    color: #666;
}
</style>